<template>

    <div class="message">

        <ul>
            <li class="list-item">
                <div class="card">
                    <h2>本功能需要授权后才能访问</h2>
                    <img slot="img" src="assets/img/default/lock.jpg"/>
                    <p>1. 授权之后在{{ minutes }}分钟内有效</p>
                    <p>2. 页面刷新后立即失效</p>
                    <yd-cell-group>
                        <yd-cell-item>
                            <yd-input slot="right" type="password" v-model="password" placeholder="请输入授权密码"></yd-input>
                        </yd-cell-item>
                        <yd-cell-item arrow @click.native="ok()">
                            <span slot="right">授权</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
            </li>
        </ul>

    </div>

</template>

<script>
module.exports = {
    data () {
        return {
            password: undefined
        }
    },
    computed: {
        minutes () {
            return this.$store.getters.grantMinuts
        }
    },
    methods: {
        ok () {
            $store.dispatch('grant')
        }
    }
}

</script>

<style scoped>
.message {
    padding: 0rem;
    overflow-y: scroll;
}
    li {
        margin-bottom: .15rem;
    }
.card {
    background-color: #fff;
    padding: .3rem;
}
.card > img {
    width: 100%;
    max-height: 6.8rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    object-fit: cover;
}
.card > h2 {
    font-size: .38rem;
    font-weight: normal;
}
.card > p {
    font-size: .28rem;
}
.card > .tag {
    font-size: .28rem;
    float: right;
    color: #666;
}
.list-item {
    display: block;
    min-height: 1rem;
}

</style>
